<template>
  <div class="energyindebox">
    <!-- 搜索栏盒子 -->
    <div class="topbox">
      <el-form ref="form" label-position="left" label-width="80px">
          <el-row :gutter="20">
              <el-col :span="5">
                <el-form-item label="用电企业">
                  <FilterSelect 
                      ref="yonghu" 
                      :optionlist="yonghulist" 
                      :valuekey="{name:'name',value:'id'}"
                      @changeselect="changeqite"
                      :defaultvalue="companyId"
                      ></FilterSelect>
                </el-form-item>
              </el-col>
              <el-col :span="19" style="text-align: right;">
                <el-form-item label="">
                  <el-button size="small" class="chongzhi" @click="chongzhi">重 置</el-button>
                  <el-button type="primary" size="small" @click="getdatalist">查 询</el-button>
                </el-form-item>
              </el-col>
          </el-row>
      </el-form>
    </div>
         <!-- 盒子主体 -->
         <div class="bodybox">
      <!-- 导出部分 -->
      <div class="top">
        <div>产品能耗指标维护</div>
        <div class="butti">
          <TopTile @command="command" @daochu="daochu" @shuaxin="shuaxin"></TopTile>
        </div>
      </div>
      <!-- table表格 -->
      <div class="table">
        <el-table
        :data="tableData"
        :size="issize"
        border
        :header-cell-style="{'text-align':'center',background:'#f5f5f5'}"
        v-loading="loading"
        height="calc(100% - 1px)"
        style="width: 100%">
        <template slot="empty">
          <el-empty description="暂无数据"></el-empty>
        </template>
        <el-table-column
          type="index"
          label="序号"
          align="center"
          width="80">
        </el-table-column>
        <el-table-column
          prop="companyName"
          label="用电企业">
        </el-table-column>
        <el-table-column
          prop="productName"
          label="产品">
        </el-table-column>
        <el-table-column label="单位产品能耗" align="center">
          <el-table-column
            prop="perProductReasonableValue"
            align="center"
            label="合理值(kWh/元)">
            <template #default="{row}">
              <el-input v-model="row.perProductReasonableValue" placeholder="请输入" size="small"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="perProductAdvancedValue"
            align="center"
            label="先进值(kWh/元)">
            <template #default="{row}">
              <el-input v-model="row.perProductAdvancedValue" placeholder="请输入" size="small"></el-input>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="万元产值能耗" align="center">
          <el-table-column
            prop="outputReasonableValue"
            align="center"
            label="合理值(kWh/元)">
            <template #default="{row}">
              <el-input v-model="row.outputReasonableValue" placeholder="请输入" size="small"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="outputAdvancedValue"
            align="center"
            label="先进值(kWh/元)">
            <template #default="{row}">
              <el-input v-model="row.outputAdvancedValue" placeholder="请输入" size="small"></el-input>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
       <!-- 底部分页 -->
       <div class="fenye">
          <div class="div"></div>
          <div class="div button"><el-button type="primary" size="small" @click="submit">保 存</el-button> </div>
          <div class="div ferig">
            <el-pagination
                background
                layout="prev, pager, next"
                :current-page.sync="pageobj.pageNo"
                :page-size="15"
                @current-change="getdatalist"
                :total="+totalCount">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import FilterSelect from '@/components/FilterSelect'
import TopTile from '@/components/TopTitle/index.vue'
import TableColumn from '@/components/Table/index.vue'
import { exportexcel } from '@/utils/excel'
import { getzhibiaolistapi ,postpiliangsubmit} from '@/api/energy-consumption/Allocation-Administration/Scheduling'
import { getyongdianlistapi } from '@/api/energy-consumption/Basic-information/medium'
export default {
  name: 'CallPoliceIndex',
  components: {
    TopTile,
    TableColumn,
    FilterSelect
  },
  data() {
    return {
      loading:false,
      companyId: '',
      yonghulist: [],
      issize: 'medium',
      tableData: [],
      totalCount: '',
      pageobj: {
        pageNo: 0,
        pageSize:15
      },
    };
  },

  async mounted() {
    // 获取用电单位
    const {data:{list}} = await getyongdianlistapi()
    this.yonghulist = list
    const companyId = localStorage.getItem('companyId')
    this.$set(this,'companyId',companyId?+companyId:'')
    this.getdatalist()
  },

  methods: {
    changeqite(val) {
      this.$set(this,'companyId',val)
      localStorage.setItem('companyId', val)
    },
    // 提交
    async submit() {
      const array =this.tableData.map(ele => {
        const { companyId, companyName, productName, ...obj } = ele
        return obj
      })
      await postpiliangsubmit(array).then(res => {
        this.$message({
          type: res.code == '200' ? 'success' : 'warning',
          message:res.code=='200'?'操作成功':res.message
        })
      })
      this.getdatalist()
    },
    // 重置
    chongzhi() {
      this.companyId=''
      this.getdatalist()
    },
    // 获取表格数据
    async getdatalist() { 
      this.loading = true
      const { data: { list,totalCount } } = await getzhibiaolistapi({
        pageNo: this.pageobj.pageNo - 1,
        pageSize: this.pageobj.pageSize,companyId:this.companyId,
      })
      this.totalCount=totalCount
      this.tableData=list
      this.loading=false
    },
   // 调节表格密度
  command(val) {
      if (val === '默认') {
        this.issize = 'medium'
      } else if (val === '中等') {
        this.issize = 'small'
      } else {
        this.issize = 'mini'
      }
    },
    // 导出
    daochu() {
      exportexcel('ecm-microservice-biz/ecm/energy/product/quota/set/exportExcel',{companyId:this.companyId},'产品能耗指标')
    },
    // 刷新列表
    shuaxin() {
      this.getdatalist()
      this.$message.success('列表刷新成功')
    },
  },
};
</script>

<style scoped>
.energyindebox{
  height: 100%;
  padding: 10px;
  .topbox{
    height: 80px;
    background-color: #fff;
    padding: 20px;
  }
  .bodybox{
    height: calc(100% - 90px);
    margin-top: 10px;
    background-color: #fff;
    padding: 20px;
    .top{
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      .butti{
        display: flex;
        align-items: center;
      }
    }
    .table{
      height: 90%;
      .fenye{
        display: flex;
        margin-top: 10px;
        .div{
          width: 33.3%;
        }
        .button{
          text-align: center;
        }
        .ferig{
          display: flex;
          justify-content: flex-end;
        }
      }
    }
  }
}
</style>